<template>
  <div class="detailWrap">
    <div class="lend-bg"></div>

    <div class="detail-box">
      <div class="detail-con1">
        <div class="title1"><img src="./flow1.png" class="flow1" onclick="return false"></div>
        <div class="title2">申请提交成功</div>
        <div class="title3">{{startTime | format}}</div>
      </div>
      <div class="detail-con2">
        <div class="line"></div>
        <div class="title4">借支金额<span v-text="money"></span>元，我们将在1-3个工作日内完成审核。</div>
      </div>
      <div class="detail-con1">
        <div class="title1"><img src="./flow1.png" class="flow1" onclick="return false"></div>
        <div class="title2">审核中</div>
        <div class="title3">{{startTime | format}}</div>
      </div>
      <div class="detail-con2">
        <div class="line grey"></div>
        <div class="title4"></div>
      </div>
      <div class="detail-con3">
        <div class="title1"><img :src="flowImg" class="flow1" onclick="return false"></div>
        <div class="title2">{{result}}</div>
        <div class="title3">{{endTime}}</div>
      </div>
      <div class="detail-con2">
        <div class="title4">{{marked}}</div>
      </div>
    </div>

    <div class="detail-btn" v-show="showBtn">
      <button type="button" class="sure" @click="confirm">{{value}}</button>
    </div>
  </div>
</template>

<script>
  import {Base64} from 'js-base64'
  import {baseUrl} from "../../common/js/env"
  import {getSessionStore, formatDate, setSessionStore} from "../../common/js/util"

  export default {
    data() {
      return {
        money: "",
        marked: "",
        result: "",
        userSign: "",
        startTime: "",
        endTime: "",
        value: "",
        showBtn: false,
        flowImg: require("./flow2.png")
      }
    },
    mounted() {
      this.userSign = Base64.decode(getSessionStore("user_sign"));
      this.$vux.loading.show({
        text: '加载中',
      })
      //查询是否有借支记录
      this.axios.get(baseUrl + "/lendmoney/query_checkrecord?sgin=" + this.userSign).then((res) => {
        let resultObj = res.data;
        this.$vux.loading.hide();
        if (resultObj.code == 0) {
          if (resultObj.data) {
            this.money = resultObj.data.lendMoney;
            this.startTime = resultObj.data.time;
            let status = resultObj.data.status;
            if (status == "1") { //审核状态 0申请处理中1审批成功2审批失败（3已还款，此状态暂时待定）
              let date = new Date(resultObj.data.set_time);
              this.endTime = formatDate(date, 'MM-dd hh:mm');
              this.flowImg = require('./flow1.png');
              this.marked = resultObj.data.remarks;
              this.value = "再借一笔";
              this.result = "审核通过，系统已转账，请注意查收";
              this.showBtn = true;
            } else if (status == "2") {
              let date = new Date(resultObj.data.set_time);
              this.endTime = formatDate(date, 'MM-dd hh:mm');
              this.flowImg = require('./flow3.png');
              this.marked = resultObj.data.remarks;
              this.result = "审核失败";
              this.value = "重新申请";
              this.showBtn = true;
            } else if (status == "0") {
              this.result = "审核通过，系统已转账，请注意查收";
              this.value = "返回";
              this.marked = "借支金额将在1个工作日内发放至您的工资卡，如遇节假日时间顺延。";
              this.showBtn = true;
            }
          }
        } else {
          this.$vux.toast.text(resultObj.msg, "middle");
        }
      }).catch(() => {
        this.$vux.loading.hide();
        this.$vux.toast.text("网络异常", "middle");
      });
    },
    methods: {
      confirm() {
        if (this.value == "再借一笔") {
          this.$router.push("/lend");
        } else if (this.value == "重新申请") {
          this.queryRefuseDay();
        } else {
          this.$router.push("/entry");
        }
      },
      queryRefuseDay() {//查询拒绝申请借支天数
        this.axios.get(baseUrl + "/lendmoney/get_refuse_lend_day?sgin=" + this.userSign).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0 && resultObj.data == 1) {
            this.$router.push("/lend");
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.toast.text("网络异常", "middle");
        });
      }
    },
    filters: {
      format(time) {
        let date = new Date(time);
        return formatDate(date, 'MM-dd hh:mm');
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../common/stylus/mixin.styl"

  .detailWrap
    wh(100%, 100%)
    .lend-bg
      wh(100%, 4.773rem)
      bg-image("./bg2.png", 100%, 100%)
    .detail-box
      wh(92.67%, auto)
      margin: 0 auto
      margin-top: 0.667rem
      .detail-con1
        display: flex
        align-items: center
        .title1
          wh(0.53rem, 0.53rem)
          margin-right: 0.306666rem
          .flow1
            wh(100%, 100%)
        .title2
          flex: 1
          size-color(0.48rem, #1B1B1B)
        .title3
          size-color(0.326666rem, #666666)
      .detail-con2
        display: flex
        position: relative
        wh(100%, 1.95rem)
        .line
          position: absolute
          left: 0.213rem
          right: 0.213rem
          wh(1px, 100%)
          background: rgba(60, 175, 255, 1)
        .grey
          background: #C5C5C5
        .title4
          margin-top: 0.293333rem
          margin-left: 0.85rem
          line-height: 0.44rem
          size-color(0.293333rem, #666666)
      .detail-con3
        display: flex
        .title1
          wh(0.53rem, 0.53rem)
          margin-right: 0.306666rem
          .flow1
            wh(100%, 100%)
        .title2
          flex: 1
          size-color(0.48rem, #1B1B1B)
        .title3
          margin-top: 0.12rem
          size-color(0.326666rem, #666666)
    .detail-btn
      padding-top: 0.2rem
      padding-bottom: 0.2rem
      wh(100%, 1.333333rem)
      line-height: 1.333333rem
      text-align: center
      .sure
        wh(92.53%, 1.333333rem)
        size-color(0.48rem, #FFF)
        background: #3CAFFF
        border-radius(0.173rem)
</style>
